<template>
  <!--平台公告页面-->
  <div class="new-tab-page anno-wrapper">
    <h3 class="anno-header">平台公告</h3>
    <ul class="anno-list-box">
      <li
        class="anno-item-box"
        v-for="(item, index) in messageList"
        :key="index"
        :class="{open: item.isOpen}"
      >
        <!---->
        <section class="anno-group" @click="openAnnoDetail(item)">
          <span
            class="anno-title"
            :class="{new: item.readStatus === 0}"
          >{{'【'+item.messageTypeStr+'】 ' + item.messageTitle}}</span>
          <span class="anno-time">
            <span class="time">{{item.createTime | mileSecondToDate}}</span>
            <i class="el-icon-caret-bottom icon-bottom"></i>
          </span>
        </section>
        <transition name="slide">
          <section class="anno-detail-box" v-show="item.isOpen">
            <p class="detail-item">{{item.content}}</p>
          </section>
        </transition>
      </li>
    </ul>
    <paging
      :cur.sync="cur"
      :size.sync="total"
      :pageSize.sync="pageSize"
      @backData="pageListMessage"
    ></paging>
  </div>
</template>

<script>
import Paging from "@/components/paging/Index.vue";
import common from "@/mixins/common.js";
export default {
  name: "Announcement",

  mixins: [common],

  components: {
    paging: Paging
  },

  data() {
    return {
      messageList: [],
      cur: 1,
      total: 0,
      pageSize: 20
    };
  },

  created() {
    this.pageListMessage();
  },

  methods: {
    // 分页获取公告列表
    pageListMessage() {
      let self = this;
      let params = {
        page: this.cur,
        rp: this.pageSize
      };
      API.fetchGet("/index/pageListMessage.do", params).then(
        res => {
          console.log(res);
          if (res && res.data) {
            let _data = res.data;
            let _list = _data.rows;
            _list.forEach(item => {
              item.isOpen = false;
              item.content = "";
            });
            self.total = _data.total;
            self.messageList = _list;
            return;
          }
          self.messageList = [];
        },
        err => {
          self.messageList = [];
          let msg = err.message || "获取数据失败";
          self.showToast(msg, 2, 1500);
        }
      );
    },

    // 读取公告内容并且置为已读
    getMessageContent(item) {
      let params = {
        messageUserId: item.id
      };
      API.fetchGet("/index/getMessageContent.do", params).then(
        res => {
          if (res && res.data) {
            item.readStatus = 1;
            item.content = res.data.messageContent;
            this.sendMessageToUpdateNotiveList("updateNotiveList");
          }
        },
        err => {
          let msg = err.message || "获取数据失败";
          self.showToast(msg, 2, 1500);
        }
      );
    },

    sendMessageToUpdateNotiveList(msg) {
      localStorage.setItem("updateNotiveList_set", JSON.stringify(msg));
      localStorage.removeItem("updateNotiveList_set");
    },

    openAnnoDetail(item) {
      item.isOpen = !item.isOpen;
      if (item.isOpen) {
        this.getMessageContent(item);
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/less/base/variables.less";
.anno-header {
  height: 50px;
  line-height: 50px;
  color: @black;
  font-size: 16px;
  padding-left: 20px;
}
.anno-list-box {
  // width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  background-color: #fff;
  padding-bottom: 20px;
}

.anno-item-box {
  border-top: 1px solid @greyED;

  &:last-child {
    border-bottom: 1px solid @greyED;
  }

  &.open {
    .icon-bottom {
      transform: rotate(-180deg);
    }
  }
}
.anno-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 46px;
  color: @grey66;
  cursor: pointer;

  .icon-bottom {
    color: @greyA5;
    font-size: 18px;
    margin-left: 8px;
    transition: transform 0.2s ease;
  }

  .anno-title {
    &.new {
      display: inline-block;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 3px;
        right: -12px;
        width: 7px;
        height: 7px;
        background-color: @red;
        border-radius: 50%;
      }
    }
  }
}

.anno-detail-box {
  padding: 0 20px 20px 10px;
  line-height: 26px;
  color: @grey66;
  letter-spacing: 0.2px;
}

.paging-box {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 0 30px;
  padding-bottom: 40px;
}
</style>
